<template>
	<div class="radar-wrapper">
		<div
			class="bg"
			:style="{
				backgroundImage: `url(${RadarBg})`,
			}"
		>
			<div
				class="scan"
				:style="{
					animationPlayState: running ? 'running' : 'paused',
					backgroundImage: `url(${RadarScan})`,
				}"
			></div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { RadarBg, RadarScan } from "@/assets/radar";

defineProps({
	running: {
		type: Boolean,
		default: false,
	},
});
</script>

<style lang="scss" scoped>
.radar-wrapper {
	width: 100%;

	.bg {
		width: 100%;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		position: relative;
		height: 0;
		padding-bottom: 100%;
	}

	.scan {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		animation: rotate 4s linear infinite;
	}
}

@keyframes rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}
</style>
